<template>
    <div>
        <div class="container block block-alone">
            <div class="head">
                <div class="head-title flex-jc-sb">
                    <div class="flex flex-ai-c">
                        <div class="title-decorate"></div>
                        <span>报案信息</span>
                    </div>
                    <el-button type="primary" size="small" v-if="caseInfo.reportStatus === 1" @click="showAddMaterial">导入</el-button>
                </div>
                <div class="head-box">
                    <div class="head-box-left">
                        <div class="head-box-i">出险人姓名：{{ caseInfo.outDangerUserName }}</div>
                        <div class="head-box-i">出险人身份证号：{{ caseInfo.idCardNo }}</div>
                        <div class="head-box-i">出险人手机号：{{ caseInfo.outDangerPhone }}</div>
                        <div class="head-box-i">出险时间：{{ caseInfo.outDangerDate }}</div>
                        <div class="head-box-i">出险地点：{{ caseInfo.outDangerPlace }}</div>
                        <div class="head-box-i">事故经过：{{ caseInfo.accidentDetails }}</div>
                        <div class="head-box-i">被派遣单位：{{ caseInfo.serveCompanyName }}</div>
                        <div class="left-video" v-for="(item,index) in caseInfo?.params?.fileUrl" :key="index">
                            <img v-if="item.fileType === 'video'" class="left-video-img" src="../assets/long-insure/play.png" alt="">
                            <i  v-else class="el-icon el-icon-link left-video-img" />
                            <a class="left-video-a" target="_blank" :href="item.fileUrl">员工出险{{ item.fileType === 'video' ? '视频' : '照片' }}</a>
                        </div>
                    </div>
                    <div class="head-box-right">
                        <div class="head-box-i">报案人手机号：{{ caseInfo.reportPhone }}</div>
                        <div class="head-box-i">报案时间：{{ caseInfo.createTime }}</div>
                        <div class="head-box-i">投保类型：日日保</div>
                        <div class="head-box-i">投保工种：{{ caseInfo.reportPlan }}</div>
                        <div class="head-box-i">投保日期：{{ caseInfo.outDangerDate }}</div>
                        <div class="head-box-i">投保方案：{{ caseInfo.insureCompanyName }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container block block-alone">
            <div class="process-box">
                <div class="process-title">
                    <div class="title-decorate"></div>
                    案件进展
                </div>
                <el-empty v-if="processList.length === 0" description="暂无进展" />
                <div class="process-timeline">
                    <el-timeline>
                        <el-timeline-item
                            v-for="(activity, index) in processList"
                            :key="index"
                            :icon="activity.icon"
                            :type="activity.type"
                            :color="activity.color"
                            :size="activity.size"
                            :hollow="activity.hollow"
                        >
                            <div class="timeline-item-i">
                                <div class="i-title">
                                    {{ activity.reportSolveResult}}
                                </div>
                                <div class="i-time">
                                    {{ activity.timestamp }}
                                </div>
                            </div>
                            <div class="timeline-item-remark">{{ activity.remark }}</div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
        </div>
        <addMaterial class="reset" v-model:show="showAdd" insureType="day" :cur-item="caseInfo"/>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { reportDetailInfo } from '@/api/long-insure'
import { insureCaseDetail } from '@/api/insure-deduction'
import addMaterial from '@/components/add-material.vue';

export default defineComponent({
    name: 'InsureReportDetail',
    components: {
        addMaterial
    },
    data () {
        return {
            processList: [] as any,
            caseInfo: {} as any,
            showAdd: false
        }
    },
    created () {
        this.getReportDetailInfo()
    },
    methods: {
        async getReportDetailInfo () {
            console.log(this.$route.params.id, 'this.$route.params.id')
            const result = await insureCaseDetail(this.$route.params.id)
            console.log(result, 'result')
            if (result.results) {
                result.results.forEach((item:{reportSolveResult:string, remark:string, createTime:string, desc:number, type:string, hollow:boolean}) => {
                    this.processList.push({
                        type: 'primary',
                        hollow: true,
                        reportSolveResult: item.reportSolveResult,
                        timestamp: item.createTime,
                        remark: item.remark,
                        desc: item.desc
                    })
                })
            }

            this.caseInfo = result
        },
        showAddMaterial() {
            this.showAdd = true
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.process-box
    min-height: 503px;
.head
    .head-title
        display flex
        align-items center
        color #202428
        font-size 18px
        font-weight 600
    .title-decorate
        width 3px
        height 16px
        background #1989FA
        margin-right 8px
    .head-box
        display flex
        align-items flex-start
        margin-top 16px
        color #5E617D
    .head-box-i
        margin-top 5px
    .left-video
        display flex
        margin-top 12px
        align-items center
    .left-video-img
        margin-right 8px
        width 16px
        height 16px
    .left-video-a
        text-decoration none
        color #1989FA
    .head-box-right
        margin-left 300px
.process-box
    .process-title
        display flex
        align-items center
        color #202428
        font-size 18px
        font-weight 600
    .title-decorate
        width 3px
        height 16px
        background #1989FA
        margin-right 8px
    .process-timeline
        margin-top 17px
.timeline-item-i
    display flex
    align-items center
    .i-title
        color #202428
        font-weight 500
        font-size 14px
        margin-right 16px
    .i-time
        font-size 12px
        color #8691A3
.timeline-item-remark
    color #8691A3
    font-size 14px
.header.block
    padding 20px
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic
:deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px
:deep().el-tabs__nav-scroll
    padding-right 20px
.height-right
    float: right
.download-btn
    width: 126px !important;
.btn-red
    background: #FF7E68
.el-tabs__header
    margin: 0
.block-alone
    padding: 38px 44px
</style>
